<template>
  <div id="piesEchart" style="height: 35vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "piesEchart",
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          // data: [
          //   "Direct",
          //   "Marketing",
          //   "Search Engine",
          //   "Email",
          //   "Union Ads",
          //   "Video Ads",
          //   "Baidu",
          //   "Google",
          //   "Bing",
          //   "Others"
          // ]
          data: ["种植", "养殖", "生产", "入岚", "批发", "农贸"]
        },
        series: [
          {
            name: "各类产品总量/占比",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1548, name: "种植" },
              { value: 775, name: "养殖" },
              { value: 679, name: "生产" },
              { value: 1548, name: "入岚" },
              { value: 775, name: "批发" },
              { value: 679, name: "农贸" }
            ]
          },
          {
            name: "各产品过期量/占比",
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: {
              length: 30
            },
            // label: {
            //   formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
            //   backgroundColor: "#F6F8FC",
            //   borderColor: "#8C8D8E",
            //   borderWidth: 1,
            //   borderRadius: 4,
            //   rich: {
            //     a: {
            //       color: "#6E7079",
            //       lineHeight: 22,
            //       align: "center"
            //     },
            //     hr: {
            //       borderColor: "#8C8D8E",
            //       width: "100%",
            //       borderWidth: 1,
            //       height: 0
            //     },
            //     b: {
            //       color: "#4C5058",
            //       fontSize: 14,
            //       fontWeight: "bold",
            //       lineHeight: 33
            //     },
            //     per: {
            //       color: "#fff",
            //       backgroundColor: "#4C5058",
            //       padding: [3, 4],
            //       borderRadius: 4
            //     }
            //   }
            // },
            data: [
              { value: 1048, name: "种植" },
              { value: 335, name: "养殖" },
              { value: 310, name: "生产" },
              { value: 251, name: "入岚" },
              { value: 234, name: "批发" },
              { value: 135, name: "农贸" }
            ]
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("piesEchart"));

      this.chart.setOption(this.options);
    }
  }
};
</script>
